<template>

  <div>

    <Card>

      <div class="p-relative" style="padding-top: 10px;">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item">
            <Button type="warning" @click='create'>添加</Button>
          </div>

        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">
        <template slot-scope="{ row, index }" slot="amount">
         {{row.amount}}元
        </template>
        <template slot-scope="{ row, index }" slot="discount">
         {{row.discount}}折
        </template>
        <template slot-scope="{ row, index }" slot="open_start_time">
         {{row.date[0]}}至{{row.date[1]}}
        </template>
        <template slot-scope="{ row, index }" slot="is_open">
          <i-switch size="large" v-model="row.is_open==1?true:false" @on-change='is_open(row,index)' true-color="#13ce66"
            false-color="#ff4949">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
           <Button type='warning' @click="edit(row, index)" size='small'>编辑</Button>
           <Button type='error' @click="del(row, index)" size='small'>删除</Button>
          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>

    </Card>
   <!-- 添加弹窗 -->
  <Modal v-model="createModal" :title="createTitle" width='700'>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <FormItem label="等级名称" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入等级名称"></Input>
        </FormItem>
        <FormItem label="会员等级" prop="level">
          <Input v-model="formValidate.level" placeholder="请输入会员等级 例 一级 填1"></Input>
        </FormItem>
        <FormItem label="升级金额" prop="amount">
          <Input v-model="formValidate.amount" placeholder="请输入满足升级条件的累计充值金额 例 填500表示充值金额累计>=500则成为该等级会员"></Input>
        </FormItem>
        <FormItem label="折扣" >
          <Input v-model="formValidate.discount" placeholder="请输入会员折扣  例如 8折 则填8"></Input>
        </FormItem>
        <FormItem label="折扣活动时间" >
         <DatePicker v-model="formValidate.date"   type="daterange" placeholder="请选择预约时间" style="width: 180px">
         </DatePicker>
        </FormItem>
        <FormItem label="折扣状态">
          <RadioGroup v-model="formValidate.is_open">
            <Radio :label="item.value" v-for="(item,index) in discountStatus">{{item.name}}</Radio>&nbsp;&nbsp;&nbsp;&nbsp;

          </RadioGroup>
        </FormItem>

      </Form>
      <div slot="footer">
        <Button type="warning" @click="save('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>

    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除该数据吗？
      </p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'
  import {
    formatDate
  } from '@/config/publicTool.js' // 日期转换,//调用的时候formatDate(),不需要this
  // 接口
  import {
    getList,
    add,
    put,
    del,
    status

  } from '@/api/users-group/vip'
  import {
    tableOption
  } from '../../../data/users-group/vip.js'
  import Tables from '_c/tables'
  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    created() {
      let _this = this
    this.$nextTick(function() {
      // 权限校验
      _this.role_add = permission(this.roles, 'userVip/add')
      _this.role_edit = permission(this.roles, 'userVip/edit')
      _this.role_del = permission(this.roles, 'userVip/delete')

    })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles
      }),

    },
    data() {
      return {
        // 权限标识
        role_add: false,
        role_edit: false,
        role_del: false,
        delModal:false,
        createModal:false,
        createTitle:'',
        isAdd:true,
        loadingText: '',
        tableOption: tableOption,
        page: {
          current: 1,
          total: 0,
          pageSize:10,

        },
        data: {
          list: [],

        },
        formValidate: {
          name: '',
          level: '',
          amount: 0,

          discount:'',
          is_open:0,
          date:''
        },
        ruleValidate: {
          name: [{
            required: true,
            message: '请输入等级名称',
            trigger: 'blur'
          }],
          level: [{
            required: true,
            message: '请输入等级',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入会员等级升级金额',
            trigger: 'blur'
          }],


        },
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态
        delId:0,
        rowId:0,
        discountStatus:[
          {
            name:'启用',
            value:1
          },
          {
            name:'禁用',
            value:0
          },
        ],
        
      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this

        let params = {
          page: this.page.current
        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size
          }
        }).catch(function(error) {
          // 异常

        })
      },
      changepage(e) {
        this.page.current=e;
        this.getList();

      },
      //新增
      create() {
        if (!this.role_add) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true

        this.createTitle = '新增会员等级'
        this.isAdd = true
        this.formValidate = {} // 表单重置
        this.handleReset('formValidate') // 验证重置
      },
      edit(row) {
        if (!this.role_edit) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true
        this.createTitle = '编辑会员等级'
        this.isAdd = false
        this.formValidate = {} // 表单重置
        this.formValidate = JSON.parse(JSON.stringify(row))
        this.formValidate.level = this.formValidate.level.toString()
        this.formValidate.amount = this.formValidate.amount.toString()
        this.handleReset('formValidate') // 验证重置
      },
      save(name) {

        let _this = this

        this.$refs[name].validate((valid) => {
          if (valid) {
            if (_this.isAdd) {

              // 新增
              let obj = {
                name: _this.formValidate.name,
                level: _this.formValidate.level,
                amount: _this.formValidate.amount,
                discount:_this.formValidate.discount,
                is_open:_this.formValidate.is_open,
                date:_this.formValidate.date,
              }

              // 新增接口
              add(obj).then(res => {
                if (res.data.status == 1) {
                  _this.createModal = false
                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                }
              }).catch(function(error) {

                console.log(error)
              })
            } else {
              // 修改
              let obj = {
                id:_this.formValidate.id,
                 name: _this.formValidate.name,
                 level: _this.formValidate.level,
                 amount: _this.formValidate.amount,
                 discount:_this.formValidate.discount,
                 is_open:_this.formValidate.is_open,
                 date:_this.formValidate.date,
              }

              // 修改接口
              put(obj).then(res => {
                if (res.data.status == 1) {
                  _this.createModal = false
                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                }
              }).catch(function(error) {
                // 异常
                console.log(error)
              })
            }

          } else {
            this.$Message.error('请输入必填项!')
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },
      // 删除
      del(row) {
        if (!this.role_del) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.delId = row.id
        this.delModal = true

        // 删除接口
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.delId
        }
        del(obj).then(res => {
          if (res.data.status == 1) {

            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false

          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      // 刷新
      refresh() {
        this.getList()
      },
      is_open(row, index) {
        // if (!this.role_status) {
        //   let config = {
        //     content: '您没有操作权限',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        let _this = this;
        let obj = {
          id: row.id,
          act: 'is_open',
          value: row.is_open == 1 ? 0 : 1
        }

        // 修改状态
        status(obj).then(res => {
          if (res.data.status == 1) {
            _this.$Message.success('操作成功')
            _this.data.list[index].is_open = obj.value;
            // _this.getList(); //重新刷新数据
          } else {
            //响应拦截里处理
          }
        }).catch(function(error) {
          //异常
          console.log(error)
        })
      },
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
